<template>
  <div>
    <el-row class="options">
      <el-button type="primary" @click="add">添加配置</el-button>
    </el-row>
    <el-table class="table" :data="tableData" stripe>
      <el-table-column prop="id" label="配置名称"></el-table-column>
      <el-table-column prop="eidNames" label="设备编号"></el-table-column>
      <el-table-column prop="time" label="时间"></el-table-column>
      <el-table-column prop="resourceName" label="资源"></el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="handleDetail(scope.row)" type="text">修改</el-button>
          <el-button @click="handleAdd(scope.row)" type="text">添加资源</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="prev, pager, next" :total="total" @current-change="changeCurrent"></el-pagination>

    <add
      :deviceList="deviceList"
      :resourceList="resourceList"
      :isShow="isShow"
      :disableRid="disableRid"
      :row="row"
      @close="closeDialog"
      @update="getList"
    ></add>
  </div>
</template>

<script>
import { configListApi, messageDelApi } from '@/api/modules/config'
import { resourceList } from '@/api/modules/resource'
import add from './add.vue'
const deviceList = [
  { key: '1', value: '1号' },
  { key: '2', value: '2号' },
  { key: '3', value: '3号' },
  { key: '4', value: '4号' },
  { key: '5', value: '5号' },
  { key: '6', value: '6号' },
  { key: '7', value: '7号' },
  { key: '8', value: '8号' },
  { key: '9', value: '9号' },
  { key: '10', value: '10号' },
  { key: '11', value: '11号' },
  { key: '12', value: '12号' },
  { key: '13', value: '13号' },
  { key: '14', value: '14号' },
  { key: '15', value: '15号' },
  { key: '16', value: '16号' },
  { key: '17', value: '17号' },
  { key: '18', value: '18号' },
  { key: '19', value: '19号' },
  { key: '20', value: '20号' },
  { key: '21', value: '21号' },
  { key: '22', value: '22号' }
]
export default {
  components: {
    add
  },
  data() {
    return {
      tableData: [],
      isShow: false,
      row: {},
      page: 1,
      pageSize: 10,
      total: 0,
      deviceList,
      resourceList: [],
      disableRid: false
    }
  },
  created() {
    this.getResoureList()
    this.getList()
  },
  methods: {
    getResoureList() {
      resourceList().then(res => {
        this.resourceList = res.data
      })
    },
    changeCurrent(val) {
      this.page = val
      this.getList()
    },
    handleAdd(row) {
      this.row = row
      this.disableRid = true
      this.isShow = true
    },
    handleDetail(row) {
      this.row = row
      this.isShow = true
    },
    closeDialog() {
      this.isShow = false
    },
    onDel(id) {
      messageDelApi({ id }).then(res => {
        this.getList()
      })
    },
    handleDel(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.onDel(row.id)
        })
        .catch(() => {})
    },
    getList() {
      configListApi({
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        const list = res.data
        list.forEach(item => {
          const eidArr = item.eid.split(',')
          let eidNameArr = []
          for (const index in eidArr) {
            for (const deviceIndex in this.deviceList) {
              if (eidArr[index] === this.deviceList[deviceIndex]['key'])
                eidNameArr.push(this.deviceList[deviceIndex]['value'])
            }
          }
          item.eidNames = eidNameArr.join()
          item.time = `${item.start_time} - ${item.end_time}`

          this.resourceList.forEach(resourceItem => {
            if (item.sid === resourceItem.id) item.resourceName = resourceItem.class
          })
        })
        this.tableData = list
        this.total = res.total
      })
    },
    add() {
      this.isShow = true
    }
  }
}
</script>

<style lang="less" scoped>
.options {
  display: flex;
  justify-content: end;
}
.table {
  margin-top: 30px;
}
.el-pagination {
  padding: 10px;
  background: #fff;
  display: flex;
  justify-content: end;
}
/deep/ .el-pager li {
  font-size: 14px;
}
.del {
  color: #f56c6c;
}
</style>
